<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :title="title" @opened="handleDialogOpened" width="90%"
               :close-on-click-modal="false" :fullscreen="true">
      <el-steps :active="stepActive" simple>
        <el-step title="基本信息"></el-step>
        <!--        <el-step title="字段信息"></el-step>-->
        <el-step title="业务字段信息"></el-step>
        <el-step title="数据库字段信息"></el-step>
      </el-steps>
      <gen-module-form ref="genForm0" v-show="stepActive === 0" :model="formData" :method="method"/>
      <!--      <gen-column-form ref="genForm1" v-show="stepActive === 1" :model="formData"/>-->
      <gen-code-field-form ref="genForm1" v-show="stepActive === 1" :model="formData"/>
      <gen-code-db-field-form ref="genForm2" v-show="stepActive === 2" :model="formData"/>
      <div slot="footer">
        <el-button type="primary" plain style="float: left" v-show="stepActive > 0" @click="stepBack">上一步</el-button>
        <el-button type="primary" plain style="float: right" v-show="stepActive < stepIndexMax" @click="stepForward">下一步
        </el-button>
        <el-button type="primary" plain style="float: right" v-show="stepActive === stepIndexMax" @click="formSubmit">确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import GenModuleForm from '@views/modules/generator/GenModuleForm.vue'
import GenCodeFieldForm from '@views/modules/generator/GenCodeFieldForm.vue'
import GenCodeDbFieldForm from '@views/modules/generator/GenCodeDbFieldForm.vue'

export default {
  name: 'GenCodeForm',
  props: {
    genId: {
      type: String,
      required: true
    },
    method: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      process: {
        formLoading: false
      },
      stepIndexMax: 2,
      stepActive: 0,
      formData: {
        id: '',
        tableName: '',
        entityName: '',
        viewPath: '',
        moduleName: '',
        permission: '',
        packagePath: '',
        fieldList: []
      }
    }
  },
  components: {
    GenModuleForm,
    GenCodeFieldForm,
    GenCodeDbFieldForm
  },
  computed: {
    loading () {
      return this.process.formLoading
    },
    editAble () {
      return this.method === 'add' || this.method === 'edit'
    },
    dialogVisible: {
      set (value) {
        this.$emit('update:visible', value)
      },
      get () {
        return this.visible
      }
    },
    title () {
      if (this.method === 'view') {
        return '查看代码生成'
      } else if (this.method === 'add') {
        return '添加代码生成'
      } else if (this.method === 'edit') {
        return '修改代码生成'
      } else {
        return ''
      }
    }
  },
  methods: {
    handleDialogOpened () {
      this.resetForm()
      if (this.genId) {
        this.loadData()
      }
    },
    stepForward () {
      this.$refs[`genForm${this.stepActive}`].submitForm().then(() => {
        this.stepActive < this.stepIndexMax && (this.stepActive += 1)
      }).catch(() => {
      })
    },
    stepBack () {
      this.stepActive > 0 && (this.stepActive -= 1)
    },
    loadData () {
      this.$http.get(`/generator/code/findById?id=${this.genId}`).then(({ data }) => {
        this.formData = this.$override(this.formData, data.data)
      })
    },
    resetForm () {
      /* for (let i = 0; i <= this.stepIndexMax; i++) {
        this.$refs['genForm' + i].resetForm()
      } */
      Object.assign(this.$data, this.$options.data())
    },
    formSubmit () {
      const promises = []
      /* const formData = {}
      for (let i = 0; i <= this.stepIndexMax; i++) {
        promises.push(this.$refs['genForm' + i].validateForm().then(() => {
          // Object.assign(formData, this.$refs['genForm' + i].getFormData())
          return Promise.resolve()
        }).catch(() => {
          this.stepActive = i
          return Promise.reject(new Error())
        }))
      } */
      Promise.all(promises).then(() => {
        /* this.$http.json('/generator/code/save', formData).then(({ data }) => {
          this.$message.success(data.message)
          this.$emit('submit-success')
        }) */
        this.$http.postJson('/generator/code/save', { id: this.genId, ...this.formData }).then(({ data }) => {
          this.dialogVisible = false
          this.$message.success(data.message)
          this.$emit('submit-success')
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
